<template>
  <div style="width: auto">
    <h1 class="text-center">有用的网站</h1>
    <!--    v-for="(index,item) in serviceLinkList" :key="item.id"-->
    <div>
      <vs-row>
        <vs-col :w="2" v-for="(index,item) in serviceLinkList" :key="item.id"
             style="margin-bottom: 10px;margin-right: 10px;margin-left: 60px;">
          <a :href="index.linkAddress" target="_blank" class="a-hover" style="font-family: 'Tw Cen MT';">
            <vs-card type="3">
              <template #title>
                <h3>{{ index.linkName }}</h3>
              </template>
              <template #img>
                <Avatar :src="index.linkPicAddress" style="width: 100px;height: 100px"/>
              </template>
              <template #text>
                <div style="width: 80px">
                  <p>
                    {{ index.linkDesc }}
                  </p>
                </div>
              </template>
            </vs-card>
          </a>
        </vs-col>
      </vs-row>
    </div>
  </div>
</template>

<script>
import Avatar from '@/components/Avatar.vue'
import axios from 'axios'
export default {
  name: 'service',
  components: {
    Avatar
  },
  data: function () {
    return {
      serviceLinkList: []
    }
  },
  methods: {
    listLinkInfo: function () {
      axios({
        url: '/api/blog/serviceLinksInfo/list',
        method: 'get'
      }).then(async (res) => {
        this.serviceLinkList = res.data.data
      })
    }
  },
  mounted: function () {
    this.listLinkInfo()
    this.$vs.notification({
      progress: 'auto',
      duration: 10000,
      position: 'top-left',
      color: 'success',
      title: '有用的网站',
      text: '这里收藏了站长常用的网站，后续会陆续增加，也欢迎你通过留言向站长推荐你喜欢用的网站,我们互相学习进步'
    })
  }
}
</script>

<style scoped>
.grid-3_xs-1_sm-2_md-2 {
  padding-bottom: 30px;
}
</style>
